<template>
	<view class="login-content">
		<view class="allbox">
			<view class="box"
				:style='{"boxShadow":" 5px 10rpx 20rpx rgba(0, 0, 0, 0.16)","borderColor":"#ccc","backgroundColor":"linear-gradient(to left,#006f6b,#5dc8b1);","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}'>
				<view class="logo"
					:style='{"padding":"0","boxShadow":"0 0px 0px rgba(0,0,0,0)","margin":"0 0 10rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
					<image
						:style='{"padding":"0","boxShadow":"0 0 0px #59f43e","margin":"0 auto 10rpx","borderColor":"#ccc","borderWidth":"0","width":"100%","borderStyle":"solid","url":"static/电力运输.png","isShow":true,"height":"160px"}'
						src='/static//login.png' mode="heightFix"></image>
				</view>
				<view class="login-title">
					REGISTER
				</view>

				<view class="margin   padding-xl radius">

					<!-- 账号密码 -->

					<view class="login_form_input">
						<view name="username" class="loginBox">
							<input type="text" class="inputcss " v-model="name" placeholder="请输入真实姓名">
						</view>
						<view class="loginBox">
							<input type="text" class="inputcss " v-model="area" placeholder="请输入地区">
						</view>
						<view class="loginBox">
							<input type="number" class="inputcss " v-model="identity_card" placeholder="请输入身份证号">
						</view>
						<view class="loginBox">
							<input type="text" class="inputcss " v-model="depart" placeholder="请输入部门">
						</view>
						<view class="loginBox">
							<picker mode="selector" class="inputcss" :range="role" :value="r_index"
								@change="roleChange">
								<view>{{role[r_index]}}</view>
							</picker>
						</view>
						<view class="loginBox">
							<input type="number" class="inputcss " v-model="age" placeholder="请输入年龄">
						</view>
						<view class="loginBox">
							<picker mode="selector" class="inputcss" :range="sex" :value="index" @change="sexChange">
								<view>{{sex[index]}}</view>
							</picker>
						</view>
						<view name="username" class="loginBox">
							<input type="password" class="inputcss " v-model="password" placeholder="请输入密码" />
						</view>
						<view name="username" class="loginBox">
							<input type="password" class="inputcss " v-model="passwordSure" placeholder="再次输入密码" />
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="btn">
					<view class="btn-submit" @click="regist">
						注册
					</view>
				</view>
			</view>
		</view>
		<!-- <input type="text" class="register-input " placeholder="请输入真实姓名">
		<input type="text" class="register-input " placeholder="请输入工号">
		<picker mode="selector" class="register-input" :range="sex" :value="index" @change="pickerChange">
			<view>{{sex[index]}}</view>
		</picker>
		<input type="text" class="register-input " placeholder="请输入手机号">
		<input type="password" class="register-input " placeholder="输入密码" />
		<input type="password" class="register-input " placeholder="再次输入密码" />
		<view class="register-btn" @click="regist">
			注册
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex: ['请选择性别', '男', '女'],
				index: 0,
				role: ['请选择身份', '现场侧', '调度侧'],
				r_index: 0,
				u_sex: "",
				u_role: "",
				identity_card: "",
				name: "",
				depart: "",
				area: "",
				password: "",
				passwordSure: "",
				age: ""
			}
		},
		onLoad() {

		},
		methods: {
			sexChange: function(e) {
				this.index = e.detail.value;
			},
			roleChange: function(e) {
				this.r_index = e.detail.value;
			},
			regist: function(e) {
				//当未选择身份时

				if (!this.depart) {
					uni.showToast({
						title: '请输入部门',
						icon: 'none'
					})
					return false
				}
				if (!this.area) {
					uni.showToast({
						title: '请输入地区',
						icon: 'none'
					})
					return false
				}
				if (!this.identity_card) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return false
				}
				// 当未输入密码时
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}
				if (!this.passwordSure) {
					uni.showToast({
						title: '请再次输入密码',
						icon: 'none'
					})
					return false
				}
				if (this.passwordSure !== this.password) {
					uni.showToast({
						title: '密码不匹配，请再次确认密码',
						icon: 'none'
					})
					return false
				}
				if (this.r_index == 0) {
					this.u_role = null;
				} else {
					this.u_role = this.role[this.r_index];
				}
				if (this.index == 0) {
					this.u_sex = null;
				} else {
					this.u_sex = this.sex[this.index];
				}
				uni.request({
					url: this.$api + '/myusers/logon',
					method: 'POST', // 请求方法
					dataType: 'text',
					data: {
						"password": this.password,
						"sex": this.u_sex,
						"name": this.name,
						"age": this.age,
						"status": this.u_role,
						"area": this.area,
						"identity_card": this.identity_card,
						"depart": this.depart
					}, //发送的数据
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						console.log(res);
						console.log("res.data");
						console.log("res");
						console.log(res.data);
						console.log(res.data.state);
						// console.log(eval(res.data));
						console.log(JSON.parse(res.data));
						// console.log($.parseJSON(res.data));
						let rr = JSON.parse(res.data);
						console.log(rr.state);
						if (rr.state == 200) {
							console.log("1" + res.data);
							console.log("2" + res.data.data);
							uni.showToast({
								title: '账号为' + rr.data,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: rr.message,
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		/* width: 90%;
		height: 500px;
		position: absolute;
		left: 12%;
		top: 20px; */
		padding: 20px 10px 35px;
		text-align: center;
		color: #333333;
	}

	.register-input {
		width: 50%;
		height: 50rpx;
		background: #f0f0f0;
		border-radius: 15px;
		text-align: left;
		padding: 15px;
		margin: 20px 5px;
		box-sizing: border-box;
	}

	.register-btn {
		width: 50%;
		height: 45px;
		border-radius: 36px;
		color: #0055ff;
		border: 1px solid #0055ff;
		text-align: center;
		line-height: 45px;
		position: fixed;

	}

	.login-title {
		font-size: 26px;
		font-weight: bold;
		margin-bottom: 1px;
		/* position: relative;
		top: 10px;
		left: 40%; */
		display: flex;
		justify-content: center;
	}

	//
	// 按钮
	.btn-submit {
		height: auto !important;
		width: 300rpx;
		line-height: 70rpx;
		background-color: #006f6b;
		padding: 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0);
		margin: 20px auto;
		border-color: #ccc;
		border-radius: 30rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		border-style: solid;
		display: flex;
		justify-content: center;

	}


	.login_form {
		// background-color: #89AB9E;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30upx 8%;
		margin-top: 10upx;
	}

	.login_form_name {
		width: 25%;
		color: #445b53;
	}

	.login_form_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1px #eee solid; */
		padding: 15upx 0upx;
		margin: 0upx auto;
	}

	//输入框
	.inputcss {
		width: 75%;
		height: 50rpx;
		background-color: #fff;
		color: #333;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0);
		margin: 0;
		border-color: rgba(229, 229, 229, 1);
		text-align: left;
		border-radius: 20rpx;
		border-width: 4rpx;
		border-style: solid;
		font-size: 20rpx;
	}

	// 背景画图
	.logo {
		background-repeat: no-repeat;
	}

	.logo {
		text-align: center;

		image {
			background-repeat: no-repeat;
			object-fit: contain;
			/* width: 100%;
			height: 100%; */
			/* height: 200upx;
			width: 200upx; */
			margin: 0 0 5upx;
		}
	}

	.loginBox {
		width: 75%;
		height: 50rpx;
		box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
		margin: 10px auto;
		border-color: #ccc;
		background-color: rgba(255, 255, 255, 0);
		border-radius: 0;
		border-width: 0;
		border-style: solid;
		display: flex;
		justify-content: center;

	}

	.btn {
		display: flex;
		justify-content: center;
	}
</style>
